<template>
  <table-header
    placeholder="请输入图片介质名称"
    :queryList="queryList"
    @pagination="getDataList"
    :rightColSpan="8"
    :leftColSpan="16"
  >
    <template #filter>
      <el-input
              placeholder="请输入图片介质名称"
              size="small"
              v-model="queryList.keyword"
              class="input-w"
              clearable
              @clear="handlerFilter"
              @keyup.enter="handlerFilter"
      />
      <el-select
              placeholder="选择画幅类型"
              v-model="queryList.layout"
              clearable
              @change="handlerFilter"
              class="select-w ml10" size="small">
        <el-option
                v-for="layout in layoutList"
                :key="layout.layoutid"
                :label="layout.layoutname"
                :value="layout.layoutid"
        ></el-option>
      </el-select>
      <el-select
              placeholder="全部部门"
              v-model="queryList.groupid"
              clearable
              @change="handlerFilter"
              class="select-w ml10" size="small">
        <el-option v-for="group in groupList"
                   :key="group.groupid"
                   :label="group.name"
                   :value="group.groupid"
        ></el-option>
      </el-select>
    </template>
    <template #operation>
      <el-button type="warning" size="small" @click="handlerDownLoadStorage">
        <el-icon>
          <download />
        </el-icon>
        云存储导入
      </el-button>
      <el-button type="primary" size="small" @click="handleCreate">
        <el-icon>
          <plus />
        </el-icon>
        新建网络图片
      </el-button>
    </template>
  </table-header>
  <table-data
    :tableData="tableData"
    :isloading="isloading"
  >
    <template #main>
      <el-table-column label="预览" width="60" align="center">
        <template #default="{row, $index}">
          <el-image
                  :preview-src-list="srcList"
                  :initial-index="$index"
                  :src="getImageUrl(row, 2)"
          />
        </template>
      </el-table-column>
      <el-table-column label="介质名称" prop="name" :show-overflow-tooltip="true" />
      <el-table-column label="介质来源" width="100">
        <template #default="{row}">
          {{sourceFromList[row.sourcefrom]}}
        </template>
      </el-table-column>
      <el-table-column label="图片大小" width="100">
        <template #default="{row}">
          <span v-if="row.extends && row.extends.size">{{formatSize(row.extends.size)}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="分辨率" width="100">
        <template #default="{row}">
          <span v-if="row.extends && row.extends.width && row.extends.height">{{row.extends.width + ' * ' + row.extends.height}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="画幅类型" width="100">
        <template #default="{row}">
          {{getLayoutName(row.layout)}}
        </template>
      </el-table-column>
      <el-table-column label="所属部门" width="140">
        <template #default="{row}">
          {{groupsOptions[row.groupid]}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button type="text" size="mini" @click="handleRelate(row)">关联</el-button>
          <el-button type="text" size="mini" @click="handleDeleteImage(row)">删除</el-button>
        </template>
      </el-table-column>
    </template>
  </table-data>
  <el-row>
    <el-col :span="24">
      <table-pagination
        :queryList="queryList"
        :total="tableData.total"
        @pagination="getDataList"
      />
    </el-col>
  </el-row>
  <create-thrid-image
          :visible="createVisible"
          @cancelCreateDialog="cancelCreateDialog"
          :groupList="groupList"
          :formData="createFormData"
          ref="createDialogRef"
          @reloadDataList="reloadDataList"
  />
  <relate
          ref="relateRef"
          :visible="relateVisible"
          :groupList="groupList"
          :queryList="relateQueryList"
          :formData="relateFormData"
          @cancelRelateDialog="cancelRelateDialog"
          :groupsOptions="groupsOptions"
  />
  <root-folder
          ref="rootFolderRef"
          :visible="folderVisible"
          :rootFolderList="folderList"
          @cancelFolderDialog="cancelFolderDialog"
          filetype="image"
          @getDataList="getDataList"
          @handleVideoPlay="handleVideoPlay"
  />
  <video-js
          ref="videoPlayRef"
          :videoTitle="videoTitle"
          :videoSrc="videoSrc"
          :videoType="videoType"
          :videoAutoPlay="videoAutoPlay"
          :dialogVisible="dialogVisible"
          @cancelVideoJs="cancelVideoJs"
  />
</template>

<script>
  import {reactive, ref, nextTick} from 'vue'
  import {useStore} from 'vuex'
  import TableHeader from "@/views/public/TableHeader";
  import TableData from "@/views/public/TableData";
  import TablePagination from "@/views/public/TablePagination";
  import {getImages, deleteImage} from "@/api/media/image";
  import {imageTypeList,
    layoutList,
    getImageUrl,
    getImageTypeName,
    getLayoutName,
    sourceFromList,
    formatSize,
    mimeTypeList,
    getVideoPlayUrl
  } from "@/utils/usage-config";
  import { Plus, Download } from "@element-plus/icons"
  import groupMixin from "@/mixins/groupMixin";
  import CreateThridImage from "./components/CreateThridImage";
  import Relate from "@/views/medium/relate/index"
  import {ElMessage, ElMessageBox} from 'element-plus'
  import rootFolder from "../storage/rootFolder";
  import VideoJs from "@/components/player/VideoJs";
  import {getFolder} from "@/api/media/storage";

  export default {
    name: "index",
    components: {TableData, TableHeader, Plus, TablePagination, CreateThridImage, Relate, Download, rootFolder, VideoJs},
    setup() {
      const store = useStore()
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        isself: undefined,
        layout: '',
        groupid: undefined,
        keyword: ''
      })
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const isloading = ref(false)
      const { groupList, groupsOptions, groupid_list } = groupMixin()
      const createVisible = ref(false)
      const createFormData = reactive({
        imgid: undefined,
        groupid_list: [0],
        name: '',
        url: '',
        layout: ''
      })
      const createDialogRef = ref(null)
      const relateVisible = ref(false)
      const relateQueryList = reactive({
        page: 1,
        pagesize: 25,
        groupid: '',
        mediatype: '',
        catid: undefined,
        keyword: undefined
      })
      const srcList = ref([])
      const relateFormData = reactive({
        imgid: undefined,
        mediaid: undefined,
        medianame: undefined,
        media_checked: false,
        series_checked: false,
        seriesid_list: []
      })
      const folderVisible = ref(false)
      const dialogVisible = ref(false)
      const videoTitle = ref('')
      const videoSrc = ref('')
      const videoType = ref('')
      const videoAutoPlay = ref(true)
      const videoPlayRef = ref(null)
      const relateRef = ref(null)
      const folderList = ref([])
      const rootFolderRef = ref(null)

      const getDataList = () => {
        isloading.value = true
        getImages(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
          srcList.value = []
          list.forEach(item => {
            srcList.value.push(getImageUrl(item, 1))
          })
        })
      }
      const handlerFilter = () => {
        queryList.page = 1
        getDataList()
      }
      const handleCreate = () => {
        resetCreateFormData()
        createVisible.value = true
        nextTick(() => {
          createDialogRef.value.createFormRef.clearValidate()
        })
      }
      const cancelCreateDialog = () => {
        createVisible.value = false
      }
      const resetCreateFormData = () => {
        createFormData.imgid = undefined
        createFormData.name = ''
        createFormData.groupid_list = [0]
        createFormData.url = ''
        createFormData.layout = ''
      }
      const handleRelate = (row) => {
        resetRelateFormData()
        resetRelateQueryList()
        relateFormData.imgid = row.imgid
        relateVisible.value = true
        nextTick(() => {
          relateRef.value.init()
        })
      }
      const resetRelateFormData = () => {
        relateFormData.seriesid_list = []
        relateFormData.series_checked = false
        relateFormData.mediaid = undefined
        relateFormData.imgid = undefined
        relateFormData.medianame  =undefined
      }
      const resetRelateQueryList = () => {
        relateQueryList.page = 1
        relateQueryList.pagesize = 25
        relateQueryList.groupid = ''
        relateQueryList.mediatype = ''
        relateQueryList.catid = undefined
        relateQueryList.keyword = undefined
      }
      const cancelRelateDialog = () => {
        relateVisible.value = false
      }
      const reloadDataList = () => {
        getDataList()
      }
      const handleDeleteImage = (row) => {
        ElMessageBox.confirm(
            '确定要删除图片' + row.name + '吗？',
            '删除图片',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
        ).then(() => {
          deleteImage({imgid: row.imgid}).then(response => {
            if (response.errcode == 0) {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
              getDataList()
            } else {
              ElMessage({type: 'success', message: response.msg, duration: 2000})
            }
          })
        })
      }
      const handleVideoPlay = (row) => {
        videoTitle.value = row.name
        dialogVisible.value = true
        videoSrc.value = getVideoPlayUrl(row)
        videoType.value = mimeTypeList[row.mimeid] ? mimeTypeList[row.mimeid] : 'video/mp4'

        nextTick(() => {
          videoPlayRef.value.init()
        })
      }
      const cancelVideoJs = () => {
        dialogVisible.value = false
      }
      getDataList()

      const handlerDownLoadStorage = async () => {
        await getFolder({
          action: 'subiddir',
          admin: store.getters.subinfo.isadmin,
          groupid: groupid_list.value.join(','),
          type: 5
        }).then(response => {
          folderList.value = response.data
        })
        folderVisible.value = true
        nextTick(() => {
          rootFolderRef.value.isRoot = true
        })
      }
      const cancelFolderDialog = () => {
        folderVisible.value = false
      }
      return {
        queryList,
        tableData,
        getDataList,
        imageTypeList,
        layoutList,
        isloading,
        getImageUrl,
        getImageTypeName,
        getLayoutName,
        handlerFilter,
        groupList,
        handleCreate,
        createVisible,
        cancelCreateDialog,
        createFormData,
        createDialogRef,
        relateVisible,
        cancelRelateDialog,
        handleRelate,
        relateQueryList,
        reloadDataList,
        srcList,
        sourceFromList,
        relateFormData,
        handleDeleteImage,
        groupsOptions,
        folderList,
        folderVisible,
        handlerDownLoadStorage,
        cancelFolderDialog,
        formatSize,
        dialogVisible,
        videoTitle,
        videoSrc,
        videoType,
        videoAutoPlay,
        handleVideoPlay,
        cancelVideoJs,
        videoPlayRef,
        relateRef,
        rootFolderRef
      }
    }
  }
</script>

<style scoped>

</style>
